<template>
    <div class="login-container">
        <div class="login-card">
            <div class="illustration-section">
                <div class="illustration">
                    <div class="tech-elements">
                        <div class="gear gear-1"></div>
                        <div class="gear gear-2"></div>
                        <div class="code-tag">&lt;/&gt;</div>
                    </div>
                    <div class="devices">
                        <div class="monitor">
                            <div class="monitor-screen">
                                <div class="menu-bar"></div>
                                <div class="input-field"></div>
                                <div class="progress-bar"></div>
                            </div>
                        </div>
                        <div class="device-stack">
                            <div class="device"></div>
                            <div class="device"></div>
                            <div class="device"></div>
                            <div class="device"></div>
                        </div>
                    </div>
                    <div class="figures">
                        <div class="figure figure-1">
                            <div class="head"></div>
                            <div class="body"></div>
                            <div class="phone"></div>
                        </div>
                        <div class="figure figure-2">
                            <div class="head"></div>
                            <div class="body"></div>
                        </div>
                    </div>
                    <div class="clouds">
                        <div class="cloud cloud-1"></div>
                        <div class="cloud cloud-2"></div>
                        <div class="cloud cloud-3"></div>
                    </div>
                </div>
            </div>

            <div class="login-section">
                <h1 class="title">ERP&MES生产制造管理综合系统</h1>

                <el-form ref="loginFormRef" :model="loginForm" class="login-form" size="large">
                    <el-form-item prop="account">
                        <el-input v-model="loginForm.account" placeholder="请输入用户名称" prefix-icon="User" clearable
                            @keyup.enter="handleLogin" />
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="请输入登录密码" prefix-icon="Lock"
                            show-password clearable @keyup.enter="handleLogin" />
                    </el-form-item>

                    <el-form-item prop="verificationCode">
                        <div class="verification-wrapper">
                            <el-input v-model="loginForm.verificationCode" placeholder="请输入校验码" clearable
                                @keyup.enter="handleLogin" class="verification-input" />
                            <div class="verification-code-display" @click="generateVerificationCode">
                                {{ verificationCode }}
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <div class="login-options">
                            <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" :loading="loading" class="login-btn" @click="handleLogin">
                            {{ loading ? '登录中...' : '登录' }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import type { LoginDto } from '@/types/auth'
import type { FormInstance } from 'element-plus'

const router = useRouter()
const authStore = useAuthStore()

const loading = ref(false)
const loginFormRef = ref<FormInstance>()
const verificationCode = ref('')
const rememberPassword = ref(false)

const loginForm = reactive<LoginDto>({
    account: '',
    password: '',
    verificationCode: ''
})

const generateVerificationCode = () => {
    const chars = '0123456789abcdef'
    let result = ''
    for (let i = 0; i < 4; i++) {
        result += chars[Math.floor(Math.random() * chars.length)]
    }
    verificationCode.value = result
}

const loadSavedCredentials = () => {
    const savedAccount = localStorage.getItem('savedAccount')
    const savedPassword = localStorage.getItem('savedPassword')
    const savedRemember = localStorage.getItem('rememberPassword')

    if (savedRemember === 'true' && savedAccount && savedPassword) {
        loginForm.account = savedAccount
        loginForm.password = savedPassword
        rememberPassword.value = true
    }
}

const saveCredentials = () => {
    if (rememberPassword.value) {
        localStorage.setItem('savedAccount', loginForm.account)
        localStorage.setItem('savedPassword', loginForm.password)
        localStorage.setItem('rememberPassword', 'true')
    } else {
        localStorage.removeItem('savedAccount')
        localStorage.removeItem('savedPassword')
        localStorage.removeItem('rememberPassword')
    }
}

const handleLogin = async () => {
    // 检查必填字段
    if (!loginForm.account || !loginForm.password || !loginForm.verificationCode) {
        ElMessage.error('请填写完整信息')
        return
    }

    try {
        loading.value = true

        const result = await authStore.login(loginForm)


        if (result.code === 200) {
            // 保存或清除记住的密码
            saveCredentials()

            ElMessage.success('登录成功！')
            router.push('/home')
        } else {
            ElMessage.error(result.msg || '登录失败')
            generateVerificationCode()
        }
    } catch (error) {
        console.error('登录错误:', error)
        ElMessage.error('登录失败，请重试')
        generateVerificationCode()
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    generateVerificationCode()
    loadSavedCredentials()
})
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    position: relative;
    overflow: hidden;
}

.login-container::before,
.login-container::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.login-container::before {
    top: -150px;
    left: -150px;
}

.login-container::after {
    bottom: -150px;
    right: -150px;
}

.login-card {
    display: flex;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 900px;
    height: 600px;
    overflow: hidden;
}

.illustration-section {
    flex: 1;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.illustration {
    position: relative;
    width: 100%;
    height: 100%;
}

.tech-elements {
    position: absolute;
    top: 20%;
    left: 20%;
}

.gear {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
}

.gear-1 {
    background: #ffd700;
    top: 0;
    left: 0;
}

.gear-2 {
    background: #1890ff;
    top: 20px;
    left: 30px;
}

.code-tag {
    position: absolute;
    top: 40px;
    left: 10px;
    font-size: 24px;
    color: #1890ff;
    font-weight: bold;
}

.devices {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.monitor {
    width: 120px;
    height: 80px;
    background: #333;
    border-radius: 8px;
    position: relative;
}

.monitor-screen {
    width: 100px;
    height: 60px;
    background: #fff;
    margin: 10px;
    border-radius: 4px;
    padding: 8px;
}

.menu-bar {
    height: 4px;
    background: #1890ff;
    margin-bottom: 4px;
    border-radius: 2px;
}

.input-field {
    height: 8px;
    background: #f0f0f0;
    margin-bottom: 4px;
    border-radius: 2px;
}

.progress-bar {
    height: 4px;
    background: #52c41a;
    border-radius: 2px;
}

.device-stack {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
}

.device {
    width: 60px;
    height: 8px;
    background: #d9d9d9;
    margin-bottom: 4px;
    border-radius: 2px;
}

.figures {
    position: absolute;
    bottom: 20%;
    left: 20%;
}

.figure {
    position: absolute;
}

.figure-1 {
    left: 0;
}

.figure-2 {
    left: 60px;
}

.head {
    width: 20px;
    height: 20px;
    background: #ffd700;
    border-radius: 50%;
    margin-bottom: 8px;
}

.body {
    width: 30px;
    height: 40px;
    background: #1890ff;
    border-radius: 15px;
}

.phone {
    width: 12px;
    height: 20px;
    background: #333;
    border-radius: 6px;
    position: absolute;
    top: -10px;
    left: 25px;
}

.clouds {
    position: absolute;
    top: 10%;
    right: 20%;
}

.cloud {
    width: 20px;
    height: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    position: absolute;
}

.cloud-1 {
    top: 0;
    left: 0;
}

.cloud-2 {
    top: 20px;
    left: 20px;
}

.cloud-3 {
    top: 40px;
    left: 0;
}

.login-section {
    flex: 1;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title {
    color: #262626;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 70px;
    line-height: 1.4;
}

.login-form {
    width: 100%;
}

.verification-wrapper {
    display: flex;
    gap: 50px;
    align-items: center;
}

.verification-input {
    flex: 1;
}

.verification-code-display {
    width: 100px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Brush Script MT', 'Segoe Script', cursive, serif;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.verification-code-display:hover {
    background: #f8f9fa;
    border-color: #c0c0c0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.verification-code-display:hover {
    background: #e6f7ff;
    border-color: #1890ff;
    transform: scale(1.05);
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}



.login-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .login-card {
        width: 100%;
        height: auto;
        margin: 20px;
        flex-direction: column;
    }

    .illustration-section {
        height: 200px;
    }

    .login-section {
        padding: 40px 20px;
    }

    .title {
        font-size: 20px;
    }

    .login-options {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}
</style>